<template>
  <Row>
    <Table border :columns="columns7" :data="data6"></Table>
    <Button type="primary" @click="modal6 = true">新建分组</Button>
    <Modal
      v-model="modal6"
      title="新增分组"
      :loading="loading"
      @on-ok="asyncOK('formItem')">
      <Form ref="formItem" :model="formItem" :rules="ruleValidate" :label-width="80">
        <FormItem label="分组名称" prop="name">
          <Input v-model="formItem.name" placeholder="请输入分组名称"></Input>
        </FormItem>
        <FormItem label="选择地址" prop="member" >
          <CheckboxGroup v-model="formItem.member">
              <Checkbox v-for="(camera) in cameras" :label="camera.id">{{camera.addr}}</Checkbox>
          </CheckboxGroup>
        </FormItem>
        <FormItem label="预计人数" prop="people_number">
          <Input v-model="formItem.people_number" placeholder="预计人数"></Input>
        </FormItem>
        <FormItem label="备注" prop="remark">
          <Input v-model="formItem.remark" placeholder="备注"></Input>
        </FormItem>
      </Form>
    </Modal>
    <Modal
      v-model="modal7"
      title="修改分组"
      :loading="loading2"
      @on-ok="asyncOK2('formItem2')">
      <Form ref="formItem2" :model="formItem2" :rules="ruleValidate2" :label-width="80">
        <FormItem label="分组ID" prop="id">
          <Input v-model="formItem2.id" disabled></Input>
        </FormItem>
        <FormItem label="分组名称" prop="name">
          <Input v-model="formItem2.name" placeholder="请输入分组名称"></Input>
        </FormItem>
        <FormItem label="选择地址" prop="member" >
          <CheckboxGroup v-model="formItem2.member">
            <Checkbox v-for="(camera) in cameras" :label="camera.id">{{camera.addr}}</Checkbox>
          </CheckboxGroup>
        </FormItem>
        <FormItem label="预计人数" prop="people_number">
          <Input v-model="formItem2.people_number" placeholder="预计人数"></Input>
        </FormItem>
        <FormItem label="备注" prop="remark">
          <Input v-model="formItem2.remark" placeholder="备注"></Input>
        </FormItem>
      </Form>
    </Modal>
  </Row>
</template>
<script>
export default {
  data () {
    return {
      columns7: [
        {
          title: '#',
          type: 'index'
        },
        {
          title: '分组名称',
          key: 'name'
        },
        {
          title: '组内成员',
          key: 'member'
        },
        {
          title: '预估人数',
          key: 'people_number'
        },
        {
          title: '备注',
          key: 'remark'
        },
        {
          title: '操作',
          key: 'action',
          width: 200,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.show(params.index)
                  }
                }
              }, '查看'),
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px',
                  marginBottom: '3px'
                },
                on: {
                  click: () => {
                    this.edit(params.index);
                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.remove(params.index)
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      data6: [],
      modal6: false,
      loading: true,
      modal7: false,
      loading2: true,
      formItem: {
        name: '',
        member: [],
        people_number: '',
        remark: ''
      },
      formItem2: {
        id:'',
        name: '',
        member: [],
        people_number: '',
        remark: ''
      },
      cameras: [],
      ruleValidate: {
        name: [
          { required: true, message: '名称不能为空', trigger: 'blur' },
          { type: 'string', min: 2, message: '不能少于2个字符', trigger: 'blur' }
        ],
        member: [
          { required: true, type: 'array', min: 1, message: '至少选择一个', trigger: 'change' }
        ],
        people_number: [
          { required: true, message: '请输入数字', trigger: 'blur' },
          { type: 'string', pattern: /^\d+$/, message: '请输入数字', trigger: 'blur' }
        ]
      },
      ruleValidate2: {
        name: [
          { required: true, message: '名称不能为空', trigger: 'blur' },
          { type: 'string', min: 2, message: '不能少于2个字符', trigger: 'blur' }
        ],
        member: [
          { required: true, type: 'array', min: 1, message: '至少选择一个', trigger: 'change' }
        ],
        people_number: [
          { required: true, message: '请输入数字', trigger: 'blur' },
          { type: 'string', pattern: /^\d+$/, message: '请输入正确端口', trigger: 'blur' }
        ]
      },
      model_flag: false,
      model_flag2: false,
    }
  },
  mounted () {
    this.$axios.get('/api/camera_group/').then((response) => {
      if (response.data.success) {
        this.data6 = response.data.data
      }
    }).catch((response) => {
      // console.log(response)
    })
    this.$axios.get('/api/camera/').then((response) => {
      if (response.data.success) {
        this.cameras = response.data.data
      }
    }).catch((response) => {
      // console.log(response)
    })
  },
  methods: {
    edit(index){
      this.modal7 = true;
      this.formItem2 = this.data6[index]
      this.formItem2.people_number +=""
      this.formItem2.member = eval(this.data6[index].member)
      console.log(this.formItem2.member)
      let tmp_member = [];
      for(let ind in this.formItem2.member ){
          for (let index  in this.cameras) {
            if(this.formItem2.member[ind] == this.cameras[index].addr){
              console.log(this.cameras[index])
              tmp_member.push(this.cameras[index].id)
            }
          }
      }
      this.formItem2.member = tmp_member
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('新增成功')
        } else {
          this.$Message.error('新增失败')
        }
        this.model_flag = valid
      })
    },
    handleSubmit2 (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('修改成功')
        } else {
          this.$Message.error('修改失败')
        }
        this.model_flag2 = valid
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    show (index) {
      this.$Modal.info({
        title: '分组信息',
        content: `分组ID：${this.data6[index].id}<br>分组名称：${this.data6[index].name}<br>组内成员：${this.data6[index].member}<br>预估人数：${this.data6[index].people_number}<br>备注：${this.data6[index].remark}`
      })
    },
    remove (index) {
      let del_data = this.data6[index]
      this.$axios.get('/api/camera_group/' + del_data.id + '/delete').then((response) => {
        if (response.data.success) {
          this.data6.splice(index, 1)
        }
      }).catch((response) => {
        console.log(response)
      })
    },
    asyncOK (name) {
      this.handleSubmit(name)
      if (this.model_flag) {
        this.loading = true
        let post_data = this.formItem
        post_data.member = JSON.stringify(post_data.member)
        this.$axios.post('/api/camera_group/',  this.qs.stringify(post_data),{
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((response) => {
          if (response.data.success) {
            this.data6.push(response.data.data)
          }
        }).catch((response) => {
          console.log(response)
        })
        setTimeout(() => {
          this.modal6 = false
        }, 1000)
      }
    }
    ,asyncOK2 (name) {
      this.handleSubmit2(name)
      if (this.model_flag2) {
        this.loading2 = true
        let post_data = JSON.parse(JSON.stringify(this.formItem2))
        post_data.member = JSON.stringify(post_data.member)
        console.log(post_data)

        this.$axios.put('/api/camera_group/',  this.qs.stringify(post_data),{
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((response) => {
          console.log("修改成功")
          // if (response.data.success) {
          //   this.data6.push(response.data.data)
          // }
        }).catch((response) => {
          console.log(response)
        })
        setTimeout(() => {
          this.modal7 = false
        }, 1000)
      }
    }
  }
}
</script>
